<template>
  <div class="flex flex-col gap-4">
    <div
      :class="`
       ${isGrouped ? '' : `bg-[#fcfcfc] border ${getBorderStyle()} border-[#f0f0f0] rounded-lg p-3`}
        ${
          !isGrouped
            ? 'relative transition-all duration-300 hover:bg-[#fafafa] hover:shadow-md'
            : ''
        }
        ${!isGrouped ? 'agentCardAnimation' : ''}
        ${!isGrouped ? 'shadow-[0_4px_12px_rgba(0,0,0,0.08)]' : ''}
      `"
      :style="
        !isGrouped
          ? {
              borderLeftColor: iconColor,
              background: `linear-gradient(135deg, ${agentBgColor} 0%, #ffffff 150%)`,
              boxShadow: `0 4px 12px rgba(${hexToRgb(iconColor)}, 0.12), 0 2px 4px rgba(${hexToRgb(
                iconColor
              )}, 0.05)`,
              borderRadius: '8px',
              transition: 'all 0.3s ease',
            }
          : {}
      "
      :data-agent-type="agent.type"
      :data-agent-name="agent.name"
    >
      <!--  Agent头部 - 仅在非分组模式下显示 -->
      <template v-if="!isGrouped">
        <div class="flex items-center mb-1.5 relative">
          <div
            class="w-7 h-7 rounded-md flex items-center justify-center mr-2.5 relative overflow-hidden"
            :style="{
              backgroundColor: iconBg,
              color: iconColor,
              boxShadow: `0 2px 6px rgba(${hexToRgb(iconColor)}, 0.18)`,
              background: `linear-gradient(135deg, ${iconBg} 0%, #ffffff 150%)`,
            }"
          >
            <div v-html="agentIcon"></div>
            <div
              class="absolute top-0 right-0 bottom-0 left-0 opacity-10"
              :style="{
                background: `linear-gradient(135deg, ${iconColor} 0%, transparent 80%)`,
              }"
            ></div>
          </div>
          <div
            class="flex items-center justify-center rounded-full mr-1.5 w-5 h-5"
            :style="{
              backgroundColor: iconColor,
              color: '#fff',
              fontSize: '0.7rem',
              fontWeight: 'bold',
            }"
          >
            {{ agent.number }}
          </div>
          <div class="text-sm font-medium" :style="{ color: iconColor }">
            {{ agent.name }}
          </div>
        </div>
      </template>
      <!-- 加载指示器 -->
      <template v-if="loading">
        <div class="flex items-center my-2.5 text-gray-500">
          <div
            class="w-4 h-4 border-2 border-gray-200 border-t-indigo-500 rounded-full mr-2 animate-spin"
          ></div>
          <span class="text-xs">正在加载...</span>
        </div>
      </template>
      <!-- Agent内容 -->
      <template v-else>
        <div :class="`${isGrouped ? '' : 'mt-1.5'} animate-fadeIn`">
          <div v-if="agent.type === 'text'" class="text-gray-600 text-xs leading-relaxed px-0.5">
            <p>{{ text }}</p>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
const loading = ref(false);
const props = defineProps({
  isGrouped: {
    type: Object,
    required: false,
  },
  agent: {
    type: Object,
    required: true,
  },
  agentBgColor: String,
});

const hexToRgb = inject("hexToRgb");
const colorConfig = inject("colorConfig");

const iconBg = colorConfig.secondary;
const iconColor = colorConfig.primary;

// 为不同智能体准备边框样式
const getBorderStyle = () => {
  if (props.agent.type === "text") return `border-l-[3px] border-l-indigo-500`;
  return `border-l-[3px]`;
};

// 获取智能体图标
const getAgentIcon = () => {
  const iconType = colorConfig.icon;

  // 根据图标类型返回相应的SVG
  switch (iconType) {
    case "scale":
      return `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3v3a2 2 0 0 1-2 2H3"></path><path d="M21 8h-3a2 2 0 0 1-2-2V3"></path><path d="M3 16h3a2 2 0 0 1 2 2v3"></path><path d="M16 21v-3a2 2 0 0 1 2-2h3"></path></svg>`;
    case "briefcase":
      return `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>`;
    case "cpu":
      return `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>`;
    case "zap":
      return `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>`;
    default:
      return `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"></rect><circle cx="12" cy="5" r="2"></circle><path d="M12 7v4"></path><line x1="8" y1="15" x2="8" y2="17"></line><line x1="16" y1="15" x2="16" y2="17"></line></svg>`;
  }
};

const agentIcon = getAgentIcon();

const text = computed(() => {
  try {
    const textObj = JSON.parse(props.agent.text);
    return textObj.text;
  } catch (e) {
    return props.agent.text;
  }
});
</script>

<style lang="scss" scoped></style>
